今日目標: 了解Model與Template 的多種綁定方式

接續昨天例子，接下來我們進一步將template repeat , model 封裝到元件中

綁定範例3 - 元件內使用template repeat屬性 [線上範例]

昨天綁定範例2是直接在html上使用template 。在這個範例，我們增加一個水果籃標籤<my-fruit-basket>，用來放水果 <my-fruit> 。

然後改直接在polymer自定元件內的template使用data-binding，並進一步將使用方式進行封裝，讓外部用起來感覺更像是一個功能完整的HTML標籤，使用上也不用知道太多技術細節，用就對了，這就是元件真正要提供的價值。

在這個例子提供四顆按鈕，按下apple,bnana,orange就會將水果放到下方水果籃裏面，按下remove就會清除最後放進去的水果

[線上範例]

先看看實際使用的html，感覺很清爽簡潔

[Github]

第19~22行: 放四顆按鈕，按下後呼叫 add() , del() 方法

第24行: 水果籃元件，用來放水果

第26~29行: 拿出水果籃元件，呼叫basket()方法將水果資訊放進去

第30~33行: 拿出水果籃元件，呼叫basket()方法移除最後放進去的水果

接下來看看水果籃元件程式碼

比較關鍵的地方應該是 template的使用方式，第11~16行。

這兩個template分別使用了 bind , repeat 這兩個屬性，bind用來產生單個template實例，而repeat則可以產生多個template實例

[Github]

第11~13行: 綁定 Model 裡面的fruits (在第22行宣告)，顯示目前fruits陣列總長度(也就是放了幾顆水果)

第14~16行: 也是綁定 fruits ，不過這裡是用repeat，所以會iterator Array，交由 <my-fruit> 產生水果長相

第21~23行: 元件完成初始化後，設定 fruits這model

第24~26行: 提供 basket 方法，讓外部可以直接取得fruits這陣列(籃子)

綁定範例4 - 限定水果籃顯示種類 [線上範例]

template可以設定條件，符合條件會產生template實例。我們就來實驗一下這功能，將水果籃元件加上 show 屬性如下 [只顯示放進去的香蕉 XD]

水果籃元件第3行增加 show 屬性，並在第15行增加 if 判斷，然後第22~24行添加判定是否產生template實例。

待續....

參考資料

template 產生實例各種方式介紹

template binding 各種方式

expression 用法介紹

香蕉應該是 banana XD